import * as vscode from 'vscode';
import { EditorInputEvent, EditorOutputEvent } from '../com/editor-struct';
import { SgsEditorProvider } from './SgsEditorProvider';
export class SgsSiderProvider implements vscode.WebviewViewProvider {
    public static readonly viewType = 'mysgs-editor-sider';
    public static instance: SgsSiderProvider | undefined
    public webView: vscode.WebviewView | undefined
    constructor(
        private readonly context: vscode.ExtensionContext
    ) { }
    public static register(context: vscode.ExtensionContext): vscode.Disposable {
        if (!SgsSiderProvider.instance) {
            SgsSiderProvider.instance = new SgsSiderProvider(context)
        }
        const providerRegistration = vscode.window.registerWebviewViewProvider(SgsSiderProvider.viewType, SgsSiderProvider.instance);
        return providerRegistration;
    }
    resolveWebviewView(webviewView: vscode.WebviewView, _context: vscode.WebviewViewResolveContext, _token: vscode.CancellationToken): Thenable<void> | void {
        this.webView = webviewView
        webviewView.webview.options = {
            enableScripts: true,
        }
        webviewView.webview.html = this.getHtml(webviewView.webview);
        webviewView.webview.onDidReceiveMessage(e => {
            switch (e.type) {
                case EditorInputEvent.NEW_FILE:
                    this.newFile()
                    break
                case EditorInputEvent.NEW_DOC:
                    this.newDoc()
                    break
                case EditorInputEvent.COMPILE_CODE:
                    this.exportDoc()
                    break
                case EditorOutputEvent.EXECUTE_CODE:
                    this.excuteDoc()
                    break
                case EditorInputEvent.NODE_SELECTOR:
                    this.nodeSelector()
                    break
                case 'checkActive':
                    this.checkActive()
                    break

            }
        })

        const activeEvnt = vscode.window.onDidChangeActiveTextEditor(() => {
            this.checkActive()
        })

        webviewView.onDidDispose(() => {
            activeEvnt.dispose()
            this.webView = undefined
        })

    }

    public checkActive() {
        const activeTab = vscode.window.tabGroups.activeTabGroup.activeTab
        if (activeTab?.label && /^.+\.sgs$/.test(activeTab.label)) {
            this.postMessage('setActive', true)
        }else{
            this.postMessage('setActive', false)
        }
    }

    public postMessage(type: string, data: any) {
        if (!this.webView) {
            return
        }
        this.webView.webview.postMessage({
            type: type,
            data,
        });
    }

    private async newFile(){
        const document = await vscode.workspace.openTextDocument({ content: '[]', language: 'sgs' });
        vscode.window.showTextDocument(document,{
            viewColumn: vscode.ViewColumn.One,
            preserveFocus: false
        });
    }

    private newDoc() {
        SgsEditorProvider.instance?.postMessage(EditorInputEvent.NEW_DOC, {})
    }

    private exportDoc() {
        SgsEditorProvider.instance?.postMessage(EditorInputEvent.COMPILE_CODE, {})
    }

    private excuteDoc() {
        SgsEditorProvider.instance?.postMessage(EditorOutputEvent.EXECUTE_CODE, {}, false)
    }

    private nodeSelector() {
        SgsEditorProvider.instance?.postMessage(EditorInputEvent.NODE_SELECTOR, {}, false)
    }

    getHtml(webview: vscode.Webview) {
        const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'vs-ext/vscode', 'side.css'));
        const scriptResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'vs-ext/vscode', 'side-web.js'));
        return `
      <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sgs</title>
    <link rel="stylesheet" href="${styleResetUri}">
</head>
<body>
    <div id="app">
        <div id="sider-menus" class="button-container">

        </div>
        <div id="welcome-box" class="welcome-box">
            <p class="welcome-title">
                <span>欢迎使用</span>
                <span>SGS</span>
                <span>节点脚本编辑器</span>
            </p>
            <button class="com-btn com-btn-block" onclick="sgsSider.newFile()">开始使用</button>
        </div>
    </div>
    <script src="${scriptResetUri}"></script>
    <script>
        const sgsSider = new SgsSiderwebview()
    </script>
</body>
</html>
    `
    }

}